<template>
	<view>
		<u-navbar :background="{background:'transparent'}" back-icon-color="#fff" :border-bottom="false" :back-text-style="{color: '#000'}">
			<view class="slot-wrap">
				<view @click="toQuestion" class="slotQ">
					<u-icon color="#fff" size="44" name="question-circle"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="recCover" :style="{backgroundImage: 'url('+backgroundUrl+')'}">
			<view>
				<text>{{new Date().getDate()}}</text>
				<text>/{{String(new Date().getMonth()+1).padStart(2,"0")}}</text>
			</view>
		</view>
		<view class="recList">
			<view class="recListLine jc-start ai-center">
				<u-icon style="margin-right: 6px;" size="46" name="play-circle"></u-icon>
				播放全部
			</view>
			<view class="recItem">
				<musicItem v-for="(item,index) in dailySongs" :key="index" :dailySong="item" :recommendReasons="recommendReasons"/>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRecommendSongs
	} from '@/api/songSheet.js'
	export default {
		data() {
			return {
				backgroundUrl: "",
				dailySongs: [],
				recommendReasons: []
			};
		},
		async onLoad(e) {
			this.backgroundUrl = e.backgroundUrl
			let data = (await getRecommendSongs()).data
			this.dailySongs = data.dailySongs
			this.recommendReasons = data.recommendReasons
		},
		methods: {
			toQuestion() {
				uni.navigateTo({
					url: "/pages/find/recQuestion"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.slotQ {
			padding: 7px 12px 7px 7px;
		}
	}

	.recCover {
		height: 57vw;
		width: 100vw;
		@include bgRepeate_none();
		margin-top: -44px;
		position: relative;
		>view:first-child{
			position: absolute;
			left: 16px;
			bottom: 48px;
			>text:first-child{
				font-size: 36px;
				color: #FFFFFF;
			}
			>text:last-child{
				font-size: 24px;
				color: #ebebeb;
			}
		}
	}

	.recList {
		position: relative;
		padding: 0 14px;
		padding-top: 50px;
		@include radiusList(calc(100vh - 57vw + 30px));

		.recListLine {
			position: absolute;
			top: 0;
			padding: 12px 0;
			font-size: 14px;
			width: calc(100vw - 28px);
		}
	}
</style>
